<script lang="ts" setup>
    import { computed, defineComponent, ref, unref, watchEffect, watch } from 'vue';
    import { useRoute, useRouter } from 'vue-router';
    import { useAppStore } from '@/store/modules/app';
    import { useI18n } from 'vue-i18n';
    const { t } = useI18n();
    const props = defineProps({
        coupons: { type: Array, default: [] },
        disabledCoupons: { type: Array, default: [] }
    });
    let active = ref(0);
    let checkedCoupons = ref(null)
    // 定义 emit 事件
    const emit = defineEmits(['change']);
    // 监听选中的优惠券变化
    watch(checkedCoupons, (newVal) => {
        // 当选中值变化时，触发 change 事件
        emit('change', newVal);
    });
    // 清除选中状态的方法
    const clearSelection = () => {
        checkedCoupons.value = null;
    };
    // 暴露方法给父组件访问
    defineExpose({
        clearSelection
    });
</script>

<template>
    <div class="couponsList">
        <van-tabs v-model:active="active">
            <van-tab :title="t('home.Available')">
                <div class="couponsList_item" v-for="(i,index) in coupons">
                    <div class=" flex al-center content ">
                        <div class="price">
                            <div class="amount txt-cen">{{i.amount}}<span class="f14">$</span></div>
                            <div class="f14 txt-cen">{{i.amount_text}}</div>
                        </div>
                        <div class="name">
                            <div class="couponName">{{i.name}}</div>
                            <div>{{i.use_start_time}}~{{i.use_end_time}}</div>
                        </div>
                        <div class="checked">
                            <van-radio :name="index" v-model="checkedCoupons"></van-radio>
                        </div>
                    </div>
                    <van-divider dashed :style="{ borderColor: '#ccc'}" />
                    <div class="f14">
                        {{i.description}}
                    </div>
                </div>
                <div v-if="coupons?.length==0">
                    <van-empty>
                    </van-empty>
                </div>
            </van-tab>
            <van-tab :title="t('home.Unavailable')">
                <div class="couponsList_item" v-for="i in disabledCoupons">
                    <div class=" flex al-center content ">
                        <div class="price">
                            <div class="amount txt-cen">{{i.amount}}<span class="f14">$</span></div>
                            <div class="f14 txt-cen">{{i.amount_text}}</div>
                        </div>
                        <div class="name">
                            <div class="couponName">{{i.name}}</div>
                            <div>{{i.use_start_time}}~{{i.use_end_time}}</div>
                        </div>
                        <!-- <div class="checked">
                            <van-radio name="1" v-model="checkedCoupons"></van-radio>
                        </div> -->
                    </div>
                    <van-divider dashed :style="{ borderColor: '#ccc',  }" />
                    <div class="f14">
                        {{i.description}}
                    </div>

                </div>
                <div v-if="disabledCoupons?.length==0">
                    <van-empty>
                    </van-empty>
                </div>
            </van-tab>
        </van-tabs>
        <div class="txt-cen footBtn">
            <van-button type="primary" style="width: 90%;" round
                @click="checkedCoupons = null; emit('change', null)">{{t('home.Notused')}}</van-button>
        </div>
    </div>
</template>

<style lang="less" scoped>
    .couponsList {
        height: 100vh;
        background-color: #f7f8fa;


        .couponsList_item {
            margin: 16px;
            padding: 12px;
            border-radius: 8px;
            box-shadow: 0 0 5px 0 #ccc;

            .content {
                .price {
                    width: 30%;
                    color: #1ba784;
                    margin-right: 8px;

                    .amount {
                        font-size: 26px;
                        font-weight: 700;

                    }

                }

                .name {
                    flex: 1;
                    font-size: 14px;

                    .couponName {
                        font-weight: 800;
                        padding: 8px 0;
                    }
                }

                .checked {
                    width: 10%;
                }
            }
        }

        .footBtn {
            position: fixed;
            bottom: 10px;
            width: 100%;
        }
    }
</style>